
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>利润中心><router-link to="/qushi">业务趋势</router-link></div>
          <div class="hei10"></div>
                <div class="title"> 落基伟业店铺业务趋势</div>
                <div id="main"></div>
            </div>
        </div>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'

	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'qushi',
		data(){
			return{
				msg:"hello",
				options:"",
				value:"",
        charts: '',
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['6-1', '6-3', '6-5', '6-7', '6-9', '6-11', '6-13', '6-15', '6-17', '6-19', '6-21', '6-23', '6-25', '6-27', '6-29']
        },
        yAxis: {
            type: 'value'
        },
        series: [
          {
            name: '下单数量',
            data: [100, 200, 300, 400, 500, 600, 500, 200, 300, 400, 500, 600, 500, 200, 300],
            type: 'line',
            smooth: true,
            cursor:'point',
            itemStyle:{
              borderWidth:10
            }
          },
          {
            name: '发货数量',
            data: [200, 300, 400, 500, 600, 500, 200, 300, 400, 500, 600, 500, 200, 300,500],
            type: 'line',
            smooth: true,
            cursor:'point'
          },
        ]
			}
		},
		created() {
      var that = this
      axios.get('https://open.ys7.com/api/lapp/live/address/get?accessToken=at.bu6amtm36n3eapij8b6pf1w76clvp44r-9guuqztalu-1ty12k1-phmnih4ta&source=E34394757:1')
      	.then(response => {
      		if(response.data.msg.code == 0){

      		}else{

      		}
      	})

		},
    methods:{
      drawPie:function(id){
        var echarts = require('echarts');
        this.charts = echarts.init(document.getElementById(id));
        this.charts.setOption({
          color:['#64BE29','#FF843D'],

          xAxis:this.xAxis,
          yAxis:this.yAxis,
          tooltip: {
              trigger: 'axis'
          },

          legend: {
            data:['下单数量','发货数量']
          },
          series: this.series,
        })
      }

    },
    mounted(){
        this.$nextTick(function() {
            this.drawPie('main')
        })
    }
	}
</script>

<style lang="scss" scoped>
	.index{
		
      .team{ background: #F9F9F9;}
      .powertop{ display: flex; width: 640px; }
      .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
      .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}

      .title{ background: #EAEAEA; padding:10px;}
      #main{ width: 100%; height:600px;}
		
	}
</style>
